<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{.title}}</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <style>
        textarea.el-textarea__inner {
            border: transparent;
            font-size: xx-large;
        }
    </style>
</head>
<body>

    <div  id="app">
        <el-container>
            <el-header title="顶栏">
                <el-row :gutter='20'>
                    <el-col :span="4" style="text-align: center;">
                        <img src="/static/images/logo.png" alt="" width="100px">
                        <h1 style="display: inline;">Blogo</h1>
                    </el-col>
                    <el-col :span="16" style="line-height: 63px;">
                        <el-input v-model="input" placeholder="请输入想查询的内容"></el-input>
                    </el-col>
                    <el-col :span="4" style="line-height: 63px; text-align: center;">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                ${user.user_nick}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-on:click="jumpFront">返回前台</el-dropdown-item>
                                <el-dropdown-item @click="jumpNewPost">发布博客</el-dropdown-item>
                                <el-dropdown-item @click="signout" divided>注销</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
                <div class="line"></div>

            </el-header>
            <hr/>
                <el-container>
                    <el-aside width="fit-content" title="侧导航栏" style="margin-top: 20px;">
                        <!-- <div v-if="isCollapse">
                        <el-button icon="el-icon-s-fold" @click="handleCollapse"></el-button>
                        </div>
                        <div v-else>
                            <el-button icon="el-icon-s-unfold" @click="handleCollapse"></el-button>
                        </div> -->
                        <el-switch style="margin-left:22px;margin-bottom: 10px;" v-model="isCollapse" active-color="#13ce66"></el-switch>

                        <el-menu default-active="2-1" class="el-menu-vertical-demo" @open="handleOpen"
                                 @close="handleClose" :collapse="isCollapse">
                            <el-menu-item index="1" @click="jumpFront">

                                <i class="el-icon-s-home"></i>
                                <span slot="title">前台</span>

                            </el-menu-item>
                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="2-1" @click="jumpContentManage">内容管理</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
                    <el-main>

                        <el-header>
                            <el-page-header @back="goBack" content="编辑博客"></el-page-header>
                            <div style="margin:20px auto" >
                                <span><h1 style="display: inline-block">标题：</h1></span>
                                <el-input v-model="title" placeholder="Please Input Here" style="width:1000px"/>
                                <el-button type="primary" @click="newBlog"></el-button>
                            </div>
                        </el-header>



                        <el-main>
                            <h1>上传图片：</h1>
                            <el-upload
                                    class="upload-demo"
                                    drag
                                    action="/blogo/blog/post"
                                    auto-upload="true"
                                    :headers="myHeaders"
                                    on-success="getFileName"
                                    multiple>
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>

                        </el-main>
                        <el-container>
                            <el-aside width="50%" style="border-right: dashed;">
                                <el-input
                                        type="textarea"
                                        v-model="content"
                                        autosize
                                        name="content"
                                        placeholder="在此处编辑"
                                        @input="changeInput"
                                        wrap="hard"
                                        style="resize: none;border: transparent;font-size: xx-large;">
                                </el-input>
                            </el-aside>
                            <el-main width="50%">
                                <el-input
                                        type="textarea"
                                        v-html="previewContent"
                                        readonly
                                        autosize
                                        name="previewContent"
                                        placeholder="预览效果"
                                        wrap="hard"
                                        style="resize: none;border: transparent;font-size: large;"></el-input>
                            </el-main>
                            <el-link @click="newBLog">提交</el-link>



                        </el-container>
                    </el-main>
                </el-container>

        </el-container>

    </div>
    <script src="/static/js/marked.min.js"></script>
    <script src="/static/js/Vue.js"></script>
    <script src="/static/js/index.js"></script>
<script>
    let url
    var token = localStorage.getItem('token')
    let Main = new Vue({
        el: "#app",
        delimiters: ["${", "}"],
        data: {
            myHeaders:{
                Authorization: token,
            },
            user:{
                user_nick: "Liang Chao"
            },
            isCollapse: false,
            title:"",
            content: "",
            previewContent: "",
            fileList: [{name: 'food', url:"/static/images/logo.png"}],

        },
        methods:{
            preview(content){
                this.previewContent = marked(content)
            },
            handlePreview(){

            },
            handleRemove(){

            },
            changeInput(){
                this.preview(this.content)
            },
            goBack() {
                let token = localStorage.getItem("token")
                location.href = `/blogo/dashboard/page?token=${token}`
            },
            getFileName(res, file, fileList){
                url = res.data.url
            },
            newBlog(){

                let title = this.title
                let content = this.content
                let success = this.$message.success
                $("i.el-icon-document").val()
                $.ajax({
                    url: `/blogo/blog/new?title=${title}&content=${content}&url=${url}&token=${token}`,
                    type: "post",
                    async: false,
                    success: (res)=>{
                        success("提交成功")
                        location.href=`/blogo/dashboard/page?token=${token}`
                    }
                })
            }
        },
        created: function (){
            this.preview(this.content)
        }


    })
</script>

</body>
</html>